import {isMobile} from "./mobile";

interface ElementInterface {
  progressBtn: HTMLElement,
  progress:HTMLElement,
  progressBg:HTMLElement
  progressBar:HTMLElement

}

export class Greeter {
  private progressBtn
  private  progress
  private progressBg
  private progressBar
  private tag=false

  constructor(private options: ElementInterface ){
      this.progressBtn=options.progressBtn
      this.progress=options.progress
      this.progressBg=options.progressBg
      this.progressBar=options.progressBar

   }

  private init(){

    let ox=0
    let left=0
    let bgLeft=0

    this.progressBtn.addEventListener('mousedown',(e)=>{
          ox=e.pageX - left
           this.tag=true
    })

    document.addEventListener('mouseup', (e)=>{
        this.tag=false

    })

    this.progress.addEventListener('mousemove',(e)=>{
       if( this.tag ){
         left=e.pageX - ox

         if(left <= 0){
           left=0

         }else if(left >= 100){
           left=80
         }
       }

       this.progressBtn.style.left=left+'px'
       this.progressBar.style.width=left+'px'
    })

   this.progressBg.addEventListener('click',(e)=>{
     if( !this.tag ){
       bgLeft=this.progress.offsetLeft
       left=e.pageX - bgLeft

       if(left <= 0){
         left=0
       }else if(left>=100){
         left=100
       }

       this.progressBtn.style.left=left+'px'
       this.progressBar.style.width=left+'px'
     }
   })
  }



}
